<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/site.css">
    <script src="js/viewport.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/public.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/qs.js"></script>
</head>

<body>
<div id="app">
    <header class="padding-35">
        <div class="logo">
            <img src="imgs/logo.png" alt="">
        </div>
        <div class="menu">
            <img src="imgs/menu.png" alt="">
        </div>
    </header>
    <div class="mbx padding-35">
        <a href="index.html">健康美食网</a>
        <i class="iconfont icon-arrow-right-copy-copy"></i>
        <span>菜谱</span>
    </div>
    <div class="search">
        <div class="searchBox padding-35">
            <input type="text" placeholder="搜索菜谱、食材、菜单、用户">
            <img src="imgs/fangdajing.png" alt="" srcset="">
        </div>
    </div>
    <div class="itemBanner padding-35">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="imgs/banner1.png" alt="">
                    <p><span>编辑推荐</span>营养早餐，添加活力，健康美味新选择</p>
                </div>
                <div class="swiper-slide">
                    <img src="imgs/banner3.png" alt="">
                    <p><span>编辑</span>营养早餐，添加活力</p>
                </div>
            </div>
        </div>
    </div>
    <div class="content padding-35">

        <div class="itemNav">
            <div class="menuTit">热门导航</div>
            <div class="itemNavList">
                <ul class="clearfix">
<!--                    class="isChange"-->
                    <li >
                        <a href="javascript:;">全部菜谱</a>
                    </li>
                    <li>
                        <a href="javascript:;">家常菜谱</a>
                    </li>
                    <li>
                        <a href="javascript:;">孕妇菜谱</a>
                    </li>
                    <li>
                        <a href="javascript:;">儿童食谱</a>
                    </li>
                    <li>
                        <a href="javascript:;">老人食谱</a>
                    </li>
                    <li>
                        <a href="javascript:;">保健食谱</a>
                    </li>
                    <li>
                        <a href="javascript:;">瘦身食谱</a>
                    </li>
                    <li>
                        <a href="javascript:;">外国食谱</a>
                    </li>
                    <li>
                        <a href="javascript:;">地方特色</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="menuBox">
            <div class="menuListBox clearfix">
<!--                <div class="menuList1 fl">-->
<!--                    <span class="isSelect">家常菜谱</span>-->
<!--                    <span>孕妇菜谱</span>-->
<!--                    <span>儿童食谱</span>-->
<!--                    <span>老人食谱</span>-->
<!--                    <span>保健食谱</span>-->
<!--                    <span>瘦身食谱</span>-->
<!--                    <span>外国食谱</span>-->
<!--                    <span>地方特色</span>-->
<!--                </div>-->
                <div class="menuListMore fr">
                    <a href="JavaScript:;">更多<i>></i></a>
                </div>
            </div>
            <div class="menuItemBox">
                <div class="recipesItemList">
                    <ul class="clearfix">
                        <li v-for="c in cuisine">
                            <div class="itemOne">
                                <img :src="c.cimg" alt="">
                            </div>
                            <div class="itemTwo">
                                <a href="javascript:;" @click.prevent="tz('cuisineDetail.html?cid=',c.cid)">{{c.cname}}</a>
                            </div>
                            <p class="itemThree">
                                <span><img src="imgs/dianxin.jpg" alt="">热菜</span>
                                <span class="fr">难度<i>:</i>初中水平</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="recipesItemList none">
                    <ul class="clearfix">
                        <li v-for="c in cuisine">
                            <div class="itemOne">
                                <img :src="c.cimg" alt="">
                            </div>
                            <div class="itemTwo">
                                <a href="javascript:;" @click.prevent="tz('cuisineDetail.html?cid=',c.cid)">{{c.cname}}</a>
                            </div>
                            <p class="itemThree">
                                <span><img src="imgs/dianxin.jpg" alt="">热菜</span>
                                <span class="fr">难度<i>:</i>初中水平</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="recipesItemList none">
                    <ul class="clearfix">
                        <li v-for="c in cuisine">
                            <div class="itemOne">
                                <img :src="c.cimg" alt="">
                            </div>
                            <div class="itemTwo">
                                <a href="javascript:;" @click.prevent="tz('cuisineDetail.html?cid=',c.cid)">{{c.cname}}</a>
                            </div>
                            <p class="itemThree">
                                <span><img src="imgs/dianxin.jpg" alt="">热菜</span>
                                <span class="fr">难度<i>:</i>初中水平</span>
                            </p>
                        </li>

                    </ul>
                </div>
            </div>
        </div>

<!--        <div class="page">-->
<!--            <a href="javascript:;">上一页</a>-->
<!--            <a class="isOn" href="javascript:;">下一页</a>-->
<!--        </div>-->

        <div class="news">
            <div class="newsTit">
                <span>热门食谱</span>
                <a class="fr" href="healthy.html">更多<i>></i></a>
            </div>
            <div class="newsList">
                <ul>
                    <li v-for="a in article">
                        <img class="fl" :src="a.aimg" alt="">
                        <div class="newsItem" @click.prevent="tz('articleDetail.html?cid=',a.aid)">
                            <p>{{a.aname}}</p>
                            <p>
                                <span><i class="iconfont icon-yonghu"></i>{{a.author}}</span>
                                <span class="fr">{{a.atime}}</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="rank">
            <div class="newsTit">
                <span>美食排行榜</span>
                <a class="fr" href="javascript:;">更多<i>></i></a>
            </div>
            <div class="rankBox">
                <ul>
                    <li v-for="d in delicacies">
                        <a href="javascript:;">{{d.dname}}</a>
                        <span class="fr">{{d.dtype}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <footer>
        <p>版权所有：版权所有：健康美食网 WWW.JKMEISHI.COM</p>
        <p>Copyright 2011-2018 备案号:鄂ICP备11013833号-4</p>
    </footer>
</div>

    <script>
        var swiper = new Swiper('.swiper-container', {
            loop: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            }
        });
        var v = new Vue({
            el : "#app",
            data : {
                delicacies : {},
                cuisine : {},
                article : {}
            },
            created(){
                this.queryCount();
                this.querybytype("家常菜谱");
                this.queryArticle();
            },
            methods:{
                querybytype(type){
                    console.log(type )
                    axios.post("healthy/cuisine/querybytype", qs.stringify({type : type})).then(res=>{
                        this.cuisine = res.data.data;
                        console.log(this.cuisine);
                    })
                },
                queryCount(){
                    axios.post("healthy/delicacies/querycount").then(res=>{
                        this.delicacies = res.data.data;
                        console.log(this.delicacies);
                    })
                },
                tz(detail,id) {
                    // location.href ="cuisineDetail.html?cid="+id;
                    location.href = detail + id;
                },
                queryArticle(){
                    axios.post("healthy/article/querybytype").then(res=>{
                        this.article = res.data.data;
                        console.log(this.article);
                    })
                }
            }
        })
        $(function () {
            $('.itemNavList li').click(function () {
                var type = $(this).text();
                v.querybytype(type);
            })
        })
    </script>
</body>

</html>